<template>
	<view class="login">
		<view class="title">超级APP</view>
		<uni-easyinput prefixIcon="contact" v-model="login.username" placeholder="用户名" class="input" :trim="false"></uni-easyinput>
		<uni-easyinput type="password" prefixIcon="search" v-model="login.password" placeholder="密码" class="password" :trim="false"></uni-easyinput>
		<button :class="['login-button', isActive ? 'active' : '']" @click="loginIndex">
			<image class="arrow" src="@/static/images/login/login-arrow.svg" mode=""></image>
		</button>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import rsaEncrypt from '../../utils/rsaEncrypt.js';
	import jwt_decode from "jwt-decode";
	import { Login } from '@/api/index.js';
	export default {
		data() {
			return {
				login: {
					username: '',
					password: ''
				}
			};
		},
		computed: {
			...mapState(['userInfo']),
			isActive() {
				return !!this.login.username && !!this.login.password;
			}
		},
		methods: {
			...mapMutations(['changeUserInfo']),
			async loginIndex() {
				if (this.login.username === '') {
					return this.$showToast('请输入用户名');
				} else if (this.login.password === '') {
					return this.$showToast('请输入密码');
				} else if (~this.login.username.indexOf(' ')) {
					return this.$showToast('输入存在空格，请重新输入');
				}
				const info = {
					nickname: this.login.username,
					password: this.login.password,
					platform: 'app'
				};
				info.nickname = rsaEncrypt(this.login.username);
				info.password = rsaEncrypt(this.login.password);
				try {
					this.$showLoading('加载中');
					const res = await Login.userLogin(info);
					uni.hideLoading();
					if (res.success) {
						this.$showToast(res.msg);
						const tokenInfo = jwt_decode(res.data.token);
						this.changeUserInfo(tokenInfo);
						uni.setStorageSync('userInfo', JSON.stringify(tokenInfo));
						uni.reLaunch({
							url: '../index/index',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					} else {
						uni.hideLoading();
						this.$showToast(res.msg);
					}
				} catch (e) {
					uni.hideLoading();
				} 
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content {
		height: 70px;
		border-radius: 70rpx;
		&>.uni-icons {
			color: #3587EE !important;
		}
		:last-child {
			span {
				font-size: 18px;
			}
		}
		:first-child {
			span {
				// padding-right: 40rpx;
				padding-right: 30rpx;
				font-size: 60px;
			}
		}
	}
	page {
		position: relative;
		height: 100%;
		padding: 0 80rpx;
	}
	.login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 590rpx;
		.title {
			font-size: 28px;
			color: $uni-text-color;
			
			margin-bottom: 70px;
		}
		.input {
			color: $uni-text-color;
			margin-bottom: 15px;
		}
		.password {
			margin-bottom: 70px;
			padding-right: 40rpx;
			::v-deep .uni-easyinput__content {
				:first-child {
					span {
						visibility: hidden;
					}
				}
			}
		}
		.login-button {
			display: flex;
			align-items: center;
			width: 140rpx;
			height: 140rpx;
			line-height: 140rpx;
			border-radius: 50%;
			
			color: #ffffff;
			background-color: #999999;
			.arrow {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.active {
			background-color: #194769;
		}
	}
</style>
